<template>
  <div class="admin-container">
    <!-- 顶部标签栏 -->
    <el-tabs v-model="activeTab" class="admin-tabs" @tab-change="handleTabChange">
      <el-tab-pane label="仪表盘" name="dashboard"></el-tab-pane>
      <el-tab-pane label="用户管理" name="users"></el-tab-pane>
      <el-tab-pane label="问题管理" name="questions"></el-tab-pane>
      <el-tab-pane label="待审核" name="pending"></el-tab-pane>
      <el-tab-pane label="回答管理" name="answers"></el-tab-pane>
      <el-tab-pane label="评论管理" name="comments"></el-tab-pane>
      <el-tab-pane label="平台统计" name="statistics"></el-tab-pane>
      <el-tab-pane label="敏感内容" name="sensitive"></el-tab-pane>
    </el-tabs>
    
    <!-- 内容区域 -->
    <div class="admin-content">
      <!-- 仪表盘内容 -->
      <div v-if="activeTab === 'dashboard'" class="admin-panel">
        <DashboardPanel ref="dashboardRef" @switch-tab="handleSwitchTab" />
      </div>
      
      <!-- 用户管理内容 -->
      <div v-else-if="activeTab === 'users'" class="admin-panel">
        <UserManagement ref="userManagementRef" />
      </div>

      <!-- 问题管理内容 -->
      <div v-else-if="activeTab === 'questions'" class="admin-panel">
        <QuestionManagement ref="questionManagementRef" />
      </div>

      <!-- 待审核问题内容 -->
      <div v-else-if="activeTab === 'pending'" class="admin-panel">
        <PendingQuestions ref="pendingQuestionsRef" />
      </div>

      <!-- 回答管理内容 -->
      <div v-else-if="activeTab === 'answers'" class="admin-panel">
        <AnswerManagement ref="answerManagementRef" />
      </div>

      <!-- 评论管理内容 -->
      <div v-else-if="activeTab === 'comments'" class="admin-panel">
        <CommentManagement ref="commentManagementRef" />
      </div>

      <!-- 平台统计内容 -->
      <div v-else-if="activeTab === 'statistics'" class="admin-panel">
        <PlatformStatistics ref="statisticsRef" @refresh="handleRefreshStatistics" />
      </div>
      
      <!-- 敏感内容管理 -->
      <div v-else-if="activeTab === 'sensitive'" class="admin-panel">
        <SensitiveContentManagement ref="sensitiveContentRef" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';

// 从统一入口文件导入所有管理组件
import {
  DashboardPanel,
  UserManagement,
  QuestionManagement,
  PendingQuestions,
  AnswerManagement,
  CommentManagement,
  PlatformStatistics,
  SensitiveContentManagement
} from '../components/admin';

const route = useRoute();

// 组件引用
const dashboardRef = ref(null);
const userManagementRef = ref(null);
const questionManagementRef = ref(null);
const pendingQuestionsRef = ref(null);
const answerManagementRef = ref(null);
const commentManagementRef = ref(null);
const statisticsRef = ref(null);
const sensitiveContentRef = ref(null);

// 标签页
const activeTab = ref('dashboard');

// 切换标签页
const handleTabChange = (tab) => {
  // 只在标签页实际变化时执行
  if (activeTab.value !== tab.props.name) {
    activeTab.value = tab.props.name;
    loadTabContent(tab.props.name);
  }
};

// 加载标签页内容
const loadTabContent = (tabName) => {
  // 使用nextTick确保DOM更新后再加载内容
  nextTick(() => {
    // 每次切换标签页时加载对应的数据
    if (tabName === 'dashboard') {
      dashboardRef.value?.refreshDashboard();
    } else if (tabName === 'users') {
      userManagementRef.value?.getUserList();
    } else if (tabName === 'questions') {
      questionManagementRef.value?.getAllQuestions();
    } else if (tabName === 'pending') {
      pendingQuestionsRef.value?.getPendingQuestions();
    } else if (tabName === 'answers') {
      answerManagementRef.value?.getAnswers();
    } else if (tabName === 'comments') {
      commentManagementRef.value?.getComments();
    } else if (tabName === 'statistics') {
      handleRefreshStatistics();
    } else if (tabName === 'sensitive') {
      sensitiveContentRef.value?.loadSensitiveHistory();
    }
  });
};

// 手动切换标签页（由子组件触发）
const handleSwitchTab = (tabName) => {
  activeTab.value = tabName;
  loadTabContent(tabName);
};

// 刷新统计数据
const handleRefreshStatistics = () => {
  statisticsRef.value?.refreshStatistics();
};

// 初始化
onMounted(() => {
  // 检查URL是否带有指定的标签页
  if (route.query.tab) {
    activeTab.value = route.query.tab;
  }
  
  // 加载初始数据
  nextTick(() => {
    if (activeTab.value === 'dashboard') {
      dashboardRef.value?.refreshDashboard();
    } else if (activeTab.value === 'users') {
      userManagementRef.value?.getUserList();
    } else if (activeTab.value === 'questions') {
      questionManagementRef.value?.getAllQuestions();
    } else if (activeTab.value === 'pending') {
      pendingQuestionsRef.value?.getPendingQuestions();
    } else if (activeTab.value === 'answers') {
      answerManagementRef.value?.getAnswers();
    } else if (activeTab.value === 'comments') {
      commentManagementRef.value?.getComments();
    } else if (activeTab.value === 'statistics') {
      handleRefreshStatistics();
    } else if (activeTab.value === 'sensitive') {
      sensitiveContentRef.value?.loadSensitiveHistory();
    }
  });
});
</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 60px); /* 减去头部导航高度 */
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f7fa;
}

.admin-tabs {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.admin-content {
  flex: 1;
  overflow: auto;
}

.admin-panel {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .admin-container {
    padding: 10px;
  }
  
  .admin-tabs {
    padding: 10px;
    margin-bottom: 10px;
  }
}
</style> 
